<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

	<head>
		<link rel="shortcut icon" type="image/x-icon" th:href="@{/img/details.png}">
		<meta charset="UTF-8">
		<title>商品详情</title>
		<link rel="stylesheet" type="text/css" th:href="@{css/swiper-4.3.5.min.css}" href="css/swiper-4.3.5.min.css" />
		<link rel="stylesheet" type="text/css" th:href="@{css/reset.css}" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" th:href="@{css/goods-details3.css}" href="css/goods-details3.css" />

		<link rel="stylesheet" type="text/css" th:href="@{css/head.css}" href="css/head.css" />
		<link rel="stylesheet" type="text/css" th:href="@{css/reset.css}"  href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" th:href="@{css/footer.css}" href="css/footer.css"/>

	</head>

	<body >

		<div class="shade absolute relative">
			<!--尺寸选项卡-->
			<div class="m-sizeHelperDialog" style=" width:550px;">
				<div class="size-title fl">
					尺码助手
				</div>
				<div class="w-close fr">
					×
				</div>
				<div class="clear">

				</div>
				<div class="size-tab" id="size-tab1">
					<ul class="size-tab-title active" >
						<li class="active fl">女式浪漫散摆修身连衣裙</li>
						<li class="fl">普通模特试穿参照</li>

						<div class="clear">

						</div>
					</ul>
					<ul class="size-tab-content">
						<li>
							<div class="mysize">
								<a href="login.html">登陆显示我的尺码</a>
							</div>
							<div class="size-name">
								女式浪漫散摆修身连衣裙
							</div>

							<div class="m-sizeTable sizeHelperPop">
								<table>
									<tbody>
										<tr class="firstLine">
											<td class="first">
												<div class="tdInnerWrap">尺码</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">肩宽cm</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">胸围cm</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">腰围cm</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">裙长cm</div>
											</td>
										</tr>
										<tr class="">
											<td class="first">
												<div class="tdInnerWrap">XS<br>155/80A</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">35</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">83</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">67</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">83</div>
											</td>
										</tr>
										<tr class="">
											<td class="first">
												<div class="tdInnerWrap">S<br>160/84A</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">36</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">86</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">70</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">84</div>
											</td>
										</tr>
										<tr class="">
											<td class="first">
												<div class="tdInnerWrap">M<br>165/88A</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">37</div>
											</td>
											<td class="" data-reactid=".3.3.1.0.0.$3.$2">
												<div class="tdInnerWrap">90</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">74</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">85</div>
											</td>
										</tr>
										<tr class="">
											<td class="first">
												<div class="tdInnerWrap">L<br>170/92A</div>
											</td>
											<td class="" data-reactid=".3.3.1.0.0.$4.$1">
												<div class="tdInnerWrap">38</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">94</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">78</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">86</div>
											</td>
										</tr>
										<tr class="">
											<td class="first">
												<div class="tdInnerWrap">XL<br>175/96A</div>
											</td>
											<td class="" data-reactid=".3.3.1.0.0.$5.$1">
												<div class="tdInnerWrap">39</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">98</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">82</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">87</div>
											</td>
										</tr>
									</tbody>
								</table>

								<div class="remarks">纯手工测量，会有1-2cm误差，敬请谅解 尺寸因个人体型而定，此表仅作参考。</div>
							</div>
						</li>
						<li>
							<div class="mysize">
								<a href="login.html">登陆显示我的尺码</a>
							</div>
							<div class="size-name">
								女式浪漫散摆修身连衣裙
							</div>

							<div style="margin-bottom: 30px;" class="m-sizeTable sizeHelperPop">
								<table>
									<tbody>
										<tr class="firstLine">
											<td class="first">
												<div class="tdInnerWrap">尺码</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">身高cm</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">体重kg</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">胸围cm</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">腰围cm</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">试穿效果</div>
											</td>
										</tr>
										<tr class="">
											<td class="first">
												<div class="tdInnerWrap">S</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">35</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">83</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">67</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">83</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">宽松</div>
											</td>
										</tr>
										<tr class="">
											<td class="first">
												<div class="tdInnerWrap">m</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">36</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">86</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">70</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">84</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">合适</div>
											</td>
										</tr>
										<tr class="">
											<td class="first">
												<div class="tdInnerWrap">l</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">37</div>
											</td>
											<td class="" data-reactid=".3.3.1.0.0.$3.$2">
												<div class="tdInnerWrap">90</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">74</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">85</div>
											</td>
											<td class="">
												<div class="tdInnerWrap">合适</div>
											</td>
										</tr>

									</tbody>
								</table>

							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<div th:replace="head::topbar"></div>
		<div class="container">

			<div class="goods-list">
				<span>首页</span>
				<p class="pict"><img height="12" src="img/xbt-4_03.png" /></p>
				<span><a href="">服装</a></span>
				<p class="pict"><img height="12" src="img/xbt-4_03.png" /></p>
				<span><a href="">女士裙装</a></span>
				<p class="pict"><img height="12" src="img/xbt-4_03.png" /></p>
				<span>女式浪漫散摆修身连衣裙</span>
			</div>
			<div class="detailHd">
				<div class="m-slide">
					<div class="view fl">
						<ul class="Bview">
							<li><img src="img/xm2-6.jpg" /></li>
							<li class="view-2"><img src="img/xm2-7.jpg" /></li>
							<li class="view-3"><img src="img/xm2-8.jpg" /></li>
							<li class="view-4"><img src="img/xm2-9.jpg" /></li>
							<li class="view-5"><img src="img/xm2-10.jpg" /></li>
							<li style="display: none;"><img src="img/xm2-6.jpg" /></li>
							<li style="display: none;"><img src="img/xm2-13.png" /></li>
						</ul>
						<ul class="Sview">
							<li><img src="img/xm2-1.jpg"></li>
							<li><img src="img/xm2-2.jpg" /></li>
							<li><img src="img/xm2-3.jpg" /></li>
							<li><img src="img/xm2-4.jpg" /></li>
							<li><img src="img/xm2-5.jpg" /></li>
						</ul>

					</div>
					<div class="m-info fl">
						<div class="better fr">
							<p style="color: #E36844; font-size: 20px;">99%</p>
							<p style="font-size: 13px;">好评率</p>
						</div>
						<div class="intro fl">

							<div class="name"><span>女式浪漫散摆修身连衣裙</span></div>
							<div class="desc">少即是多，浪漫圆摆气质大爱</div>
						</div>
						<div class="clear">

						</div>
						<div class="m-price">
							<div class="f-clearfix">
								<span style="font-size: 13px; padding-right: 20px;">价格</span>
								<span style="font-size: 18px; color: red;">￥</span>
								<span style="font-size: 28px; color: red; font-weight: 700;">399</span>
							</div>
							<div class="field">
								<ul>
									<li><span style="font-size: 13px; padding-right:20px ;">领券</span>
										<img class="ph1" src="img/pl-1_03.png" />
										<img class="ph2" src="img/pl-1_06.png" />
										<span style="border-bottom: 1px solid red; border-top: 1px solid red; background-color: floralwhite; padding: 0 3px; font-size: 13px;">40元直减券</span>
									</li>
									<li>
										<img class="ph3" src="img/pl-1_03.png" />
										<img class="ph4" src="img/pl-1_06.png" />
										<span style="border-bottom: 1px solid red; border-top: 1px solid red; background-color: floralwhite; padding: 0 3px; font-size: 13px;">每满199减30</span>
									</li>
									<li>
										<img class="ph5" src="img/pl-1_03.png" />
										<img class="ph6" src="img/pl-1_06.png" />
										<span style="border-bottom: 1px solid red; border-top: 1px solid red; background-color: floralwhite; padding: 0 3px; font-size: 13px;">全场满249减24</span>
									</li>
									<li>
										<a style="font-size: 13px; padding-left: 5px;" href="#">立即领取></a>
									</li>
								</ul>
							</div>
							<div style="padding-bottom: 10px;" class="f-field">
								<span style="font-size: 13px; padding-right: 20px;">积分</span>
								<span style="font-size: 13px;">购买最高得39积分</span>
							</div>
							<div class="f-bar">
							</div>
							<div style="padding-bottom: 20px;" class="policyBox">
								<span style="font-size: 13px; padding-right:20px ;">服务</span>
								<a href="">
									<span style="font-size: 13px;">.支持7天无忧退货</span>
									<span style="font-size: 13px; padding-left: 20px;">.四十八小时快速退款</span>
									<span style="font-size: 13px; padding-left: 20px; padding-right: 70px;">.满88元包邮</span>
									<span style="font-size: 13px; padding-left: 50px;">.网易自营品牌</span>
									<span style="font-size: 13px; padding-left: 20px;">.国内部分地区无法配送</span>
								</a>

							</div>
						</div>
						<!--尺寸-->
						<div style="position: relative; margin-right: 10px;" class="c-specProp">
							<span class="fl" style="padding-left: 10px;line-height: 50px; vertical-align: middle;">尺寸</span>
							<div style="vertical-align: middle;" class="m-cont fl">
								<ul>
									<li style="position: relative;">xs<img class="selected" src="img/sys_item_selected.gif" /></li>
									<li style="position: relative;">s<img class="selected" src="img/sys_item_selected.gif" /></li>
									<li style="position: relative;">m<img class="selected" src="img/sys_item_selected.gif" /></li>
									<li style="position: relative;">l<img class="selected" src="img/sys_item_selected.gif" /></li>

								</ul>
							</div>
							<div class="clear">

							</div>
						</div>
						<!--款式-->
						<div style="position: relative; margin-right: 10px;" class="specProp fl">
							<span style="padding-left: 10px;line-height: 50px; vertical-align: middle;">款式</span>
							<img class="design" style=" margin-left: 20px; vertical-align: middle; " src="img/xm2-11.png" />
							<img class="selected" src="img/sys_item_selected.gif" />
						</div>
						<div style="position: relative;" class="specProp fl">
							<img class="design" style=" margin-left: 20px; vertical-align: middle; " src="img/xm2-12.png" />
							<img class="selected" src="img/sys_item_selected.gif" />
						</div>
						<div class="clear">

						</div>
						<!--数量-->
						<div class="m-number fl">
							<span class="fl" style="padding-left: 10px;line-height: 50px; vertical-align: middle;">数量</span>
							<div class="u-selnum fl">
								<button type="button" class="u-less fl"> - </button>
								<input class="fl" style=" text-align: center; outline: none; color: #333333; width: 60px; height: 34px; border: 0.5px solid #DEDEDE;" type="text"  value="1" />
								<button type="button" class="u-more fl"> + </button>
								<div class="clear"></div>
							</div>
							<!--尺寸-->
							<div class="m-size fl">
								<img src="img/cc-1_02.png" />
								<span>尺码助手</span>
							</div>
							<div class="clear"></div>
						</div>
						<div class="clear">

						</div>

						<!--购买-->
						<div style="margin-top: 30px;" class="u-buy">
							<a style="margin-left: 10px;" class="u-buys fl" href="shopping-cars.html"><span>立即购买</span> </a>
							<a style="margin-left: 10px;" class="u-bus fl" href="shopping-cars.html"><span><img style="padding-right: 5px;" src="img/xbt-7_02.png"/>加入购物车</span></a>
							<p style="margin-left: 10px;" class="u-collect fl"><img class="c-star1 tran5" src="img/c-star2_02.png" /><span class="have2 tran5">收藏</span><img class="c-star2 tran5" src="img/c-star2_05.png" /><span class="have tran5">已收藏</span> </p>
							<div class="clear"></div>
						</div>
					</div>
					<div class="clear"></div>
				</div>

			</div>

			<!-- Swiper -->
			<div class="swiper-container">
				<div style="color: black; font-size: 17px; padding: 10px;" class="swiper-hd">
					大家都在看
				</div>
				<div class="swiper-wrapper">

					<div style="overflow: hidden; height: 290px; " class="swiper-slide">
						<div class="u-photo tran5">
							<a href="goods-details3.html"><img class="tran5" src="img/xm2-14.png" /></a>
							<div class="prdtTags">
								<span>新品</span>
							</div>
							<h4 class="u-name"><a href="goods-details3.html">装饰袖针织连衣裙</a></h4>
							<p style="padding-top: 3px; font-size: 14px; vertical-align: middle;">￥73
								<a href="shopping-cars.html"><img style="vertical-align: middle;" src="img/xm-13.png" /></a>
							</p>

						</div>

					</div>
					<div style="overflow: hidden; height: 290px;" class="swiper-slide">
						<div class="u-photo tran5">
							<a href="goods-details3.html"><img style="width: 210px;" class="tran5" src="img/xm2-17.png" /></a>
							<div style="width: 60px;" class="prdtTags">
								<span>盛夏特惠</span>
							</div>
							<h4 class="u-name"><a href="goods-details3.html">100%纯棉 女式纯棉百搭V领T恤</a></h4>
							<p style="; padding-top: 3px; font-size: 14px; vertical-align: middle;">￥269
								<a href="shopping-cars.html"><img style="vertical-align: middle;" src="img/xm-13.png" /></a>
							</p>

						</div>

					</div>
					<div style="overflow: hidden; height: 290px;" class="swiper-slide">
						<div class="u-photo tran5">
							<a href="goods-details3.html"><img class="tran5" src="img/xm2-16.png" /></a>
							<div class="prdtTags">
								<span>新品</span>
							</div>
							<h4 class="u-name"><a href="goods-details3.html">女式经典纯色polo裙</a></h4>
							<p style="padding-top: 3px; font-size: 14px; vertical-align: middle;">￥219
								<a href="shopping-cars.html"><img style="vertical-align: middle;" src="img/xm-13.png" /></a>
							</p>

						</div>

					</div>
					<div style="overflow: hidden; height: 290px;" class="swiper-slide">
						<div class="u-photo tran5">
							<a href="goods-details3.html"><img class="tran5" src="img/xm2-15.png" /></a>
							<div class="prdtTags">
								<span>新品</span>
							</div>
							<h4 class="u-name"><a href="goods-details3.html">女式提花针织半裙</a></h4>
							<p style="padding-top: 3px; font-size: 14px; vertical-align: middle;">￥299
								<a href="shopping-cars.html"><img style="vertical-align: middle;" src="img/xm-13.png" /></a>
							</p>

						</div>

					</div>

				</div>

				<!-- Add Arrows -->
				<div class="swiper-button-next"></div>
				<div class="swiper-button-prev"></div>
			</div>

			<div class="left fl">
				<!--选项卡-->
				<div class="tab" id="tab1">
					<ul class="tab-title active">
						<li class="active fl">详情</li>
						<li class="fl">评价</li>
						<li class="fl">常见问题</li>
						<div class="clear">

						</div>
					</ul>
					<ul style="height: 100%;" class="tab-content m-attrList" >
						<li>
							<div class="details">
								<p class="fl">产品详情 <span>130mm*130mm*130mm</span></p>
								<p class="fl">材质 <span style="padding-left: 100px;">ABS+铝合金+珠光漆</span></p>
								<div class="clear">

								</div>
							</div>
							<div class="consume">
								<p class="fl">功耗<span>45W</span></p>
								<p style="padding-left: 144px;" class="fl">电源适配器 <span style="padding-left: 57px;">19V/3.4A</span></p>
								<div class="clear">

								</div>
							</div>
							<div class="battery">
								<p class="fl">电池容量 </p><span class="fl" style="width: 350px">16000mAH大容量 音乐播放7小时、电影播放2.5小时。充电时长约2小时，充电期间产品正常使用。</span>
								<div class="clear">

								</div>
							</div>
							<div class="after-sale">
								<p>售后服务 </p>
								<span>本品支持7天无理由退换货。</span>
								<span>自用户签收之日起，15日内如本产品出现质量问题，用户可选择换货。</span>
								<span>自用户签收之日起，1年内如本产品出现质量问题，用户可将产品寄回严选免费保修，严选承诺收到产品后3个工作日内完成维修或换新寄出产品，运费由严选承担；若非质量问题引起故障，维修费用和运费则需用户自行承担。</span>
								<span>4.首次使用时如电量不足请及时充电，充电期间产品正常使用。</span>
								<span>5. 如您需购买麦克风、游戏手柄等用于本投影仪的配件，建议咨询客服购买推荐款式（已适配确认可用），以免自行购买款式无法适用。</span>

							</div>
							<div class="hint">
								<p>售后服务 </p>
								<span>1.7天无忧退换货说明：产品、配件需保持完好，无磨损、污渍。包材、说明书齐全不影响二次销售。</span>
								<span>2.本品赠送定制三脚架，三脚架顶部360度云台可随意调整投影仪角度，旋转三脚架中部可实现三脚架两档高度调整。</span>
								<span style="width: 700px;">3.因网络信号、互联网电视政策限制导致的使用问题不属于投影仪质量问题，产品使用问题欢迎咨询严选客服。</span>
							</div>
							<img src="img/xm-12-1.jpg" />
							<img src="img/xm-12-2.png" />
							<img src="img/xm-12-3.png" />
						</li>
						<li style="padding-top: 27px">
							<div class="m-goodRates fl">
								<div class="label">好评率</div>
								<div class="goodRate">90.3%</div>
								<div class="m-score">
									<img width="14px" src="img/qq_06(1).png" />
									<img width="14px" src="img/qq_06(1).png" />
									<img width="14px" src="img/qq_06(1).png" />
									<img width="14px" src="img/qq_06(1).png" />
									<img width="14px" src="img/qq_06(1).png" />
								</div>
							</div>
							<div class="m-commentNav fl">
								<div class="title">大家都在说：</div>
								<div class="labelList"> <span class="label active " data-name="全部" data-type="1">全部（31）</span> <span class="label  " data-name="有图" data-type="0">有图（16）</span> <span class="label  " data-name="追评" data-type="0">追评（4）</span> </div>
							</div>
							<div class="clear">
							</div>
							<div class="m-bar">

							</div>
							<div class="m-sorts"> <span class="name">排序：</span>
								<a href="javascript:;" class="sort ">默认</a>
								<a href="javascript:;" style="color: black;" class="sort ">评价时间 <i class="w-icon"></i></a>
							</div>
							<div class="m-commentUser">
								<div class="t-img fl">
									<img style="border-radius: 50px;" width="50px" src="img/user-1.jpeg" />
									<div class="username-withIcon">
										<a class="w-icon-member" href="#"><img style="vertical-align: middle;" src="img/V-1.png" /><span class="username">b****0</span></a>
									</div>
								</div>
								<div class="m-commentItem fl">
									<div class="m-score">
										<img width="14px" src="img/qq_06(1).png" />
										<img width="14px" src="img/qq_06(1).png" />
										<img width="14px" src="img/qq_06(1).png" />
										<img width="14px" src="img/qq_06(1).png" />
										<img width="14px" src="img/qq_06(1).png" />
									</div>
									<div class="skuInfo"> <span class="mr20">款式:便携</span> </div>
									<div class="m-content"> 效果绝对好，轻便颜值高。就是有些矫正和移动硬盘读取还在研究中 </div>
									<div class="m-picList" style="display: inline-block;">
										<img src="img/pj-z.jpg" />
										<img src="img/pj-z.jpg" />
										<img src="img/pj-z.jpg" />
									</div>
									<div class="m-picList-big">
										<!-- Swiper -->
										<div class="swiper-container c">
											<div style="font-size: 28px;" class="m-del fr">
												<span style="cursor: pointer;">×</span>
											</div>
											<div class="clear">

											</div>
											<div class=".c swiper-wrapper">

												<div style="padding: 10px;" class=".c swiper-slide">
													<img height="400px" src="img/pj-2.jpg" />
												</div>
												<div style="padding: 10px;" class="swiper-slide">
													<img height="400px" src="img/pj-2.jpg" />
												</div>
												<div style="padding: 10px;" class="swiper-slide">
													<img height="400px" src="img/pj-2.jpg" />
												</div>
											</div>
											<!-- Add Arrows -->
											<div class=".c swiper-button-next"></div>
											<div class=".c swiper-button-prev"></div>
										</div>

									</div>
								</div>
								<div class="clear">

								</div>
							</div>
							<div class="m-commentUser">
								<div class="t-img fl">
									<img style="border-radius: 50px;" width="50px" src="img/user-1.jpeg" />
									<div class="username-withIcon">
										<a class="w-icon-member" href="#"><img style="vertical-align: middle;" src="img/V-1.png" /><span class="username">b****0</span></a>
									</div>
								</div>
								<div class="m-commentItem fl">
									<div class="m-score">
										<img width="14px" src="img/qq_06(1).png" />
										<img width="14px" src="img/qq_06(1).png" />
										<img width="14px" src="img/qq_06(1).png" />
										<img width="14px" src="img/qq_06(1).png" />
										<img width="14px" src="img/qq_06(1).png" />
									</div>
									<div class="skuInfo"> <span class="mr20">款式:便携</span> </div>
									<div class="m-content"> 效果绝对好，轻便颜值高。就是有些矫正和移动硬盘读取还在研究中 </div>
									<div class="m-picList" style="display: inline-block;">
										<img src="img/pj-z.jpg" />
										<img src="img/pj-z.jpg" />
										<img src="img/pj-z.jpg" />
									</div>
									<div class="m-picList-big">
										<!-- Swiper -->
										<div class="swiper-container c">
											<div style="font-size: 28px;" class="m-del fr">
												<span style="cursor: pointer;">×</span>
											</div>
											<div class="clear">

											</div>
											<div class=".c swiper-wrapper">

												<div style="padding: 10px;" class=".c swiper-slide">
													<img height="400px" src="img/pj-2.jpg" />
												</div>
												<div style="padding: 10px;" class="swiper-slide">
													<img height="400px" src="img/pj-2.jpg" />
												</div>
												<div style="padding: 10px;" class="swiper-slide">
													<img height="400px" src="img/pj-2.jpg" />
												</div>
											</div>
											<!-- Add Arrows -->
											<div class=".c swiper-button-next"></div>
											<div class=".c swiper-button-prev"></div>
										</div>

									</div>
								</div>
								<div class="clear">

								</div>
							</div>
							<div class="m-commentUser">
								<div class="t-img fl">
									<img style="border-radius: 50px;" width="50px" src="img/user-1.jpeg" />
									<div class="username-withIcon">
										<a class="w-icon-member" href="#"><img style="vertical-align: middle;" src="img/V-1.png" /><span class="username">b****0</span></a>
									</div>
								</div>
								<div class="m-commentItem fl">
									<div class="m-score">
										<img width="14px" src="img/qq_06(1).png" />
										<img width="14px" src="img/qq_06(1).png" />
										<img width="14px" src="img/qq_06(1).png" />
										<img width="14px" src="img/qq_06(1).png" />
										<img width="14px" src="img/qq_06(1).png" />
									</div>
									<div class="skuInfo"> <span class="mr20">款式:便携</span> </div>
									<div class="m-content"> 效果绝对好，轻便颜值高。就是有些矫正和移动硬盘读取还在研究中 </div>
									<div class="m-picList" style="display: inline-block;">
										<img src="img/pj-z.jpg" />
										<img src="img/pj-z.jpg" />
										<img src="img/pj-z.jpg" />
									</div>
									<div class="m-picList-big">
										<!-- Swiper -->
										<div class="swiper-container c">
											<div style="font-size: 28px;" class="m-del fr">
												<span style="cursor: pointer;">×</span>
											</div>
											<div class="clear">

											</div>
											<div class=".c swiper-wrapper">

												<div style="padding: 10px;" class=".c swiper-slide">
													<img height="400px" src="img/pj-2.jpg" />
												</div>
												<div style="padding: 10px;" class="swiper-slide">
													<img height="400px" src="img/pj-2.jpg" />
												</div>
												<div style="padding: 10px;" class="swiper-slide">
													<img height="400px" src="img/pj-2.jpg" />
												</div>
											</div>
											<!-- Add Arrows -->
											<div class=".c swiper-button-next"></div>
											<div class=".c swiper-button-prev"></div>
										</div>

									</div>
								</div>
								<div class="clear">
								</div>
							</div>
						</li>
						<li>

							<div class="after-sale">
								<p>购买运费如何收取？ </p>
								<span>单笔订单金额（不含运费）满88元免邮费；不满88元，每单收取10元运费。</span>
								<span>(港澳台地区需满500元免邮费；不满500元，每单收取30元运费)。</span>
							</div>
							<div class="hint">
								<p>网易严选的订单如何配送？</p>
								<span style="width: 650px;">网易严选会根据商品所在地、顾客所在地和商品的尺寸重量优选物流配送商，确保优质用户体验。目前暂不支持自选快递，具体物流信息可在下单成功后“我的订单-追踪物流”中查看。</span>
							</div>
							<div class="after-sale">
								<p>如何申请退换货？ </p>
								<span>1.自收到商品之日起30日内，顾客可申请无忧退货；如果是退货，退款将原路返还，不同的银行处理时间不同，预计1-5个工作日到账；</span>
								<span>2.内裤和食品等特殊商品无质量问题不支持退换货；</span>
								<span>3.退货流程：</br>
								确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成；
								</span>

								<span>4.换货流程：</br>
								确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成;
								</span>

								<span>5.退换货运费由网易严选承担（大件商品除外）。上门取件费用由网易严选统一与快递服务商结算，顾客只需将退换货商品交给上门取件快递员寄回。如顾客选择自行寄回商品，请先垫付运费，到货验证商品后，严选将以现金券形式为用户报销运费，不接受单方面到付件。</span>
							</div>
							<div class="after-sale">
								<p>如何开具发票？ </p>
								<span>1.请在下单时选择“我要开发票”并填写相关信息（APP仅限2.4.0及以上版本）。开具增值税专用发票需在下单时填写增票资质信息。温馨提示：请确保增票资质信息与贵司税务登记证信息一致，避免因开票信息错误给贵司带来损失。</span>
								<span>2.可选开票内容：</br>
依照国税总局开票法规，严选订单开具纸质发票、电子发票，开票内容为明细；礼品卡开票内容为预付卡；增值税专用发票开票内容为明细。</span>
							</div>
						</li>

					</ul>
				</div>

			</div>
			<div class="right fl">

				<div class="hot-sell">
					<header class="header">24小时热销</header>
					<ul>
						<li><a href="goods-details.html"><img src="img/xr-1.png" /></a>
							<p>
								<a style="font-size: 14px; color: #000000;" href="goods-details.html">严选礼品卡 100元面值</a>
							</p>
							<div class="r-price">
								<span style="font-size: 14px;">￥100</span>
								<span class="r-bus"><a href="shopping-cars.html"><img src="img/xm-13.png"/></a></span>
							</div>
						</li>
						<li><a href="goods-details.html"><img src="img/xr-2.png" /></a>
							<p>
								<a style="font-size: 14px; color: #000000;" href="goods-details.html">谷风一木 小卷纸</a>
							</p>
							<div class="r-price">
								<span style="font-size: 14px;">￥27.9</span>
								<span class="r-bus"><a href="shopping-cars.html"><img src="img/xm-13.png"/></a></span>
							</div>
						</li>
						<li style="position: relative;"><a href="goods-details.html"><img src="img/xr-3.png" /></a>
							<div class="r-color">
								十色可选
							</div>
							<p>
								<a style="font-size: 14px; color: #000000;" href="goods-details.html">玩趣彩虹四季拖鞋</a>
							</p>
							<div class="r-price">
								<span style="font-size: 14px;">￥19.9</span>
								<span class="r-bus"><a href="shopping-cars.html"><img src="img/xm-13.png"/></a></span>
							</div>
						</li>
						<li><a href="goods-details.html"><img src="img/xr-4.png" /></a>
							<p>
								<a style="font-size: 14px; color: #000000;" href="goods-details.html">懒人抹布</a>
							</p>
							<div style="border-bottom: 0px;" class="r-price">
								<span style="font-size: 14px;">￥13.9</span>
								<span class="r-bus"><a href="shopping-cars.html"><img src="img/xm-13.png"/></a></span>
							</div>
						</li>
					</ul>
				</div>
				<div style="margin-top: 20px;" class="special">
					<header class="header">专题推荐</header>
					<ul>
						<li style="position: relative;">
							<a href="goods-details.html"><img src="img/xr-5.png" />
								<div class="text">
									8月24日新品放映室
								</div>
							</a>

						</li>
						<li style="position: relative;">
							<a href="goods-details.html"><img src="img/xr-6.png" />
								<div class="text">
									吃得到果肉的，才是真凤梨酥
								</div>
							</a>

						</li>
						<li style="position: relative;">
							<a href="goods-details.html"><img src="img/xr-7.png" />
								<div class="text">
									宝贝开学总动员
								</div>
							</a>

						</li>
						<li style="position: relative;">
							<a href="goods-details.html"><img src="img/xr-8.png" />
								<div class="text">
									别提起好水，你只知道依云
								</div>
							</a>

						</li>

					</ul>
				</div>

			</div>
			<div class="clear">

			</div>
		</div>
		<div class="tab2">
			<div class="container">
				<ul>
					<li>详情</li>
					<li>评价</li>
					<li>常见问题</li>
				</ul>
			</div>
		</div>
		<div th:replace="footer::#footbar"></div>

		<script th:src="@{js/swiper.min.js}" src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{js/swiper-4.3.5.min.js}" src="js/swiper-4.3.5.min.js" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{js/jquery-3.3.1.min.js}" src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{layer-v3.1.1/layer/layer.js}" src="layer-v3.1.1/layer/layer.js" type="text/javascript" charset="utf-8"></script>


		<script type="text/javascript">
			$(document).ready(function() {
				//底部侧边栏关闭
				$(".icon-sidebarx").click(function() {
					$(this).parents(".sidebar-b-bac").remove();
				});
				//右边侧边栏关闭
				$(".icon-subx").click(function() {
					$(this).parents(".sub-list").css("display", "none");
				});
				//右边hover弹窗input隐藏出现
				$(".sub-inputbox").click(function() {
					$(this).prev(".icon-inputx").css("opacity", 1);
				});
				//下拉到200px侧边栏出现回到顶部且导航栏出现，上啦消失，且导航栏消失
				$(window).scroll(function() {
					var top = $(document).scrollTop();
					if(top > 200) {
						$(".sidebar-r-totop").css({
							display: 'block'
						});
						$(".navigation-fix").slideDown();
					} else {
						$(".sidebar-r-totop").css({
							display: 'none'
						});
						$(".navigation-fix").slideUp();
					}
				});
				//点击回到顶部，回到顶部
				$(".sidebar-r-totop").click(function() {
					$("html,body").animate({
						scrollTop: 0
					}, 500);
				});

			})
		</script>

		<script type="text/javascript">
			var flag = true
			$('.u-collect').click(function() {

				if(flag) {
					$('.c-star1').css('transform', 'translateY(-17px)')
					$('.c-star2').css('transform', 'translateY(-48px)')
					$('.have2').css('opacity', '0')
					$('.have').css('opacity', '1')
					flag = false
				} else {
					$('.c-star1').css('transform', 'translateY(2px)')
					$('.c-star2').css('transform', 'translateY(17px)')
					$('.have2').css('opacity', '1')
					$('.have').css('opacity', '0')
					
						//配置一个透明的询问框
						layer.msg('取消收藏', {
							time: 2000, //2s后自动关闭
							
						});
					
					flag = true
				}

			})
		</script>

		<script type="text/javascript">
			$(window).scroll(function() {
				var top = $(document).scrollTop();
				if(top > 1200.5) {
					$('.navigation-fix').slideUp().remove()
					$('.tab2').css('display', 'block')
					$('.tab2').slideDown()

				} else {
					$('.tab2').slideUp()
					$('.tab2').css('display', 'none')
				}

			})
		</script>

		<script type="text/javascript">
			$('.m-size').click(function() {
				$('.shade').css('display', 'block')
			})
		</script>
		<script type="text/javascript">
			$('.w-close').click(function() {
				$('.shade').css('display', 'none')
			})
		</script>

		<script type="text/javascript">
			$('.size-tab-title li').click(function() {
				//切换active
				$(this).siblings().removeClass('active');
				$(this).addClass('active');
				var i = $(this).index();
				$(this).parent().siblings('.size-tab-content').find('li').css('display', 'none')
				$(this).parent().siblings('.size-tab-content').find('li').eq(i).css('display', 'block');

			})
		</script>
		<script type="text/javascript">
			$('.Sview li').hover(function() {
				$('.Sview li').css('border', 'none')
				$(this).css('border', '1px solid red')
				var i = $(this).index();
				$(this).parent().siblings('.Bview').children('li').css('display', 'none');
				$(this).parent().siblings('.Bview').children('li').eq(i).css('display', 'block')
			})
		</script>
		<script type="text/javascript">
			$('.m-cont li').click(function() {
				$('.m-cont li').css('border', '1px solid #E7E7E7');
				$(this).css('border', '1px solid red')
				$('.m-cont li .selected').css('display', 'none');
				$(this).children('.selected').css('display', 'block')
			})
		</script>

		<script type="text/javascript">
			$('.specProp img').click(function() {
				var i = $(this).parent().index()
                  console.log(i)
				$('.specProp img').css('border', 'none')
				$(this).css('border', '0.5px solid red')
				$('.specProp .selected').css('display', 'none');
				$(this).siblings('.selected').css('display', 'block')
				$('.Bview li').css('display', 'none');
				$(this).parents('.m-info').siblings('.view').find('li').eq(i).css('display', 'block')

			})
		</script>

		<script type="text/javascript">
			$('.u-selnum').each(function() {
				var oInput = $('input')
				var oNum = 1
				$('.u-more').click(function() {
					oNum = $('input').val();
					oNum++;
					$('input').val(oNum)
				})
				$('.u-less').click(function() {
					if(oNum > 0) {
						oNum--;
						$('input').val(oNum)
					}

				})
			})
		</script>

		<!--轮播-->
		<script>
			var swiper = new Swiper('.swiper-container', {
				slidesPerView: 4,
				spaceBetween: 10,
				slidesPerGroup: 4,
				loop: true,
				loopFillGroupWithBlank: true,

				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
			});
		</script>
		<!--轮播2-->
		<!-- Initialize Swiper -->
		<script>
			var swiper = new Swiper('.c', {
				navigation: {
					nextEl: '.c .swiper-button-next',
					prevEl: '.c .swiper-button-prev',
				},
			});
		</script>
		<script type="text/javascript">
			$('.m-picList img').click(function() {
				$(this).parent().siblings('.m-picList-big').find('.c').css('display', 'block')
			})
		</script>
		<script type="text/javascript">
			$('.m-del span').click(function() {
				$(this).parents('.c').css('display', 'none')
			})
		</script>
		<!--选项卡-->
		<script type="text/javascript">
			$('.tab-title li').click(function() {
				//切换active
				$(this).siblings().removeClass('active');
				$(this).addClass('active');
				var i = $(this).index();
				//				console.log(i)
				$(this).parent().siblings('.tab-content').find('li').css('display', 'none')
				$(this).parent().siblings('.tab-content').find('li').eq(i).css('display', 'block');

			})
		</script>

	</body>

</html>